import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
const router = new VueRouter({
    mode:'hash',
    routes:[
        {
            path:'/shouye',
            name:'shouye',
            component:()=>import('../views/ShouYe.vue'),
            meta:{
                show:true
            },
            beforeEnter:(to,from,next)=>{
                console.log('单独路由独享');
                console.log(to);
                console.log(from);
                next();
            }
        },
        {
            path:'/itemdetail/:id',
            name:'itemdetail',
            component:()=>import('../views/shouye/ItemDetail.vue')
        },
        {
            path:'/fenlei',
            name:'fenlei',
            component:()=>import('../views/FenLei.vue'),
            meta:{
                show:true
            },
            children:[
                {
                    path:'remen',
                    name:'remen',
                    component:()=>import('../views/fenlei/ReMen.vue'),
                    meta:{
                        show:true
                    },
                    children:[
                        {
                            path:'xiangbao',
                            name:'xiangbao',
                            component:()=>import('../views/fenlei/remen/XiangBao.vue')
                        }
                    ]
                },
                {
                    path:'shuma',
                    name:'shuma',
                    component:()=>import('../views/fenlei/ShuMa.vue'),
                    meta:{
                        show:true
                    }
                }
            ]
        },
        {
            path:'/car',
            name:'car',
            component:()=>import('../views/Car.vue'),
            meta:{
                show:true
            }
        },
        {
            path:'/',
            redirect:'/shouye'
        },
        {
            path:'/chongzhi',
            name:'chongzhi',
            component:()=>import('../views/ChongZhi.vue')
        }

    ]
})
// 添加路由
router.addRoute({
    path:'/personcenter',
    name:'personcenter',
    component:()=>import('../views/PersonCenter.vue')
});
// 添加嵌套路由
router.addRoute('fenlei',{
    path:'shouxuan',
    name:'shouxuan',
    component:()=>import('../views/fenlei/ShouXuan.vue')
})

// 全局守卫
console.log(router.beforeEach);
console.log(router.afterEach);
/* router.beforeEach((to,from,next)=>{
    console.log(to);// 目标路由 去哪个路由
    console.log(from);//起始哪个路由  从哪里来
    next();//放行
    // next(false) 中断不执行
}) */
// 首页能直接访问  分类和购物车不能直接访问，需要有个条件才能放  充值
// 例如充值后 路由都放到固定的数组中
// const paths = ['/fenlei','/car'];
// 首页可以直接访问
// next() 当没有充值时跳转到充值页面进行充值
const paths = ['/fenlei','/car'];
// 当你跳转去某个路由时，需要判断去的路由的路径是否在paths,在需要判断它是否充值了，是充值  充值了放行  没有充值跳转到充值页面
// 不在直接放行
router.beforeEach((to,from,next)=>{
    /* console.log(to);
    console.log(from);
    next(); */
    console.log(to.path);
    if(paths.indexOf(to.path)>=0){
        // 需要充值
        let flag = true; //默认现在是充值
        if(flag){
            next();//放行
        }else{
            // next('/chongzhi');//不放行 跳转到指定路由
            next({name:'chongzhi'})
            // next({path:'/chongzhi'})
            // next(false);//不放行那也去不了
        }
    }else{
        // 如果不在放行
        next();
    }
})

router.afterEach((to,from)=>{
    console.log('后置守卫');
    console.log(to);
    console.log(from);
})

export default router;